<template>
    <div class="user-list">
        <h2>用户列表</h2>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="adminId" label="管理员ID" width="120" />
            <el-table-column prop="account" label="账号" width="150" />
            <el-table-column prop="adminName" label="姓名" width="120" />
            <el-table-column prop="phone" label="手机号" width="150" />
            <el-table-column prop="roleName" label="角色" width="120" />
            <el-table-column prop="createTime" label="创建时间" width="180" />
        </el-table>

        <el-pagination background layout="prev, pager,next,total" :total="_total" :current-page="current"
            @current-change="handlePageChange" style="margin-top: 20px; text-align: right;" />
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from 'vue'
import { adminList } from '../../api/admin'
import { DataGrid, AdminListInfo } from '../../type'

const tableData = ref<AdminListInfo[]>([])
const _total = ref<number>(0);
const current = ref(1);
const size = 10; // 每页显示的数量

// 分页发生变化的是执行的代码
const handlePageChange = (page: number) => {
    current.value = page;
    _adminList();
}

onMounted(() => {
    _adminList();
})

const _adminList = () => {
    adminList(current.value, size).then(dataGrid => {
        const { list, total } = dataGrid;
        // list 的数据复制到 tableData
        tableData.value = list;
        _total.value = total;
    })
}

</script>

<style scoped>
.user-list {
    padding: 20px;
}
</style>
